<template>
  <div>
    <div class="addBody">
      <el-form :inline="true" class="demo-form-inline">
        <div class="textTitle">基本信息</div>
      </el-form>
      <el-form :inline="true" class="addMessage" ref="addData" :model="addData" label-width="80px">
        <el-form-item label="站点编号:">
          <el-input class="smallMessage readonlyMessage" v-model="addData.pid" readonly></el-input>
        </el-form-item>
        <span style="position: absolute; margin: 15px 0px 0px 0px; color: red;">*</span>
        <el-form-item label="站点名称:">
          <el-input class="smallMessage" v-model="addData.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="所属项目:">
          <el-select class="smallMessage" v-model="addData.project_no" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.project_id"
              :label="item.project_name"
              :value="item.project_id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="demo-form-inline">
        <div class="textTitle">附加信息<equipdialog style="float: right;" v-bind:noNeedShow="noShow" v-on:equipOnly="equipOnly"></equipdialog></div>
      </el-form>
      <el-table :data="theEquip" stripe fit highlight-current-row
                style="width: 100%;" :header-cell-style="{background:'#F7F8F9'}">
        <el-table-column
          prop="equip_cid"
          label="出厂编号"
          width="250">
        </el-table-column>
        <el-table-column
          prop="name_label"
          label="起重机名称"
          width="250">
        </el-table-column>
        <el-table-column
          prop="brand_label"
          label="品牌"
          width="250">
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          width="250">
        </el-table-column>
        <el-table-column
          prop="work_level_label"
          label="工作级别"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="produce_date"
          label="创建时间"
          width="170">
        </el-table-column>
        <el-table-column
          label="操作"
          width="140">
          <template slot-scope="scope">
            <el-button @click.native.prevent="lookEquip(scope.$index, scope.row)" class="tableIcon" type="text" title="查看" size="small">
              <img :src="detail" alt="查看"/>
            </el-button>
            <el-button class="tableIcon" type="text" title="取消关联" @click="disassociation()" size="small">
              <i class="el-icon-circle-close-outline"></i>
            </el-button>
            <relationPopup v-on:assetOnly="assetOnly"></relationPopup>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="theAsset" stripe fit highlight-current-row
                style="width: 100%;" :header-cell-style="{background:'#F7F8F9'}">
        <el-table-column
          prop="asset_no"
          label="物联网关编号"
          width="250">
        </el-table-column>
        <el-table-column
          prop="asset_name"
          label="物联网关名称"
          width="250">
        </el-table-column>
        <el-table-column
          prop="brand"
          label="品牌"
          width="250">
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          width="250">
        </el-table-column>
        <el-table-column
          prop="sn"
          label="序列号"
          min-width="125">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="160">
        </el-table-column>
        <el-table-column
          prop="asset_status"
          label="状态"
          width="70">
        </el-table-column>
        <el-table-column
          label="操作"
          width="140">
          <template slot-scope="scope">
            <el-button @click.native.prevent="lookInternet(scope.$index, scope.row)" class="tableIcon" type="text" title="查看" size="small">
              <img :src="detail" alt="查看"/>
            </el-button>
            <el-button class="tableIcon" type="text" title="取消关联" @click="disassociation2()" size="small">
              <i class="el-icon-circle-close-outline"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button type="primary" class="clear"><router-link :to="{path:'/monitor/system/station'}">取消</router-link></el-button>
    <el-button class="indieWidth" type="primary" @click="addsite()">保存</el-button>
  </div>
</template>

<script>
  import detail from '@/assets/reports/detail_normal.png'
  import relationPopup from '@/views/managementSide/mSiteAdmin/components/dialog'
  import equipdialog from '@/views/managementSide/mSiteAdmin/components/equipdialog'
  import axios from 'axios'
  export default {
    components: {
      relationPopup,
      equipdialog
    },
    data() {
      return {
        detail,
        theEquip: [],
        theAsset: [],
        options: [],
        noShow: '',
        addData: {
          pid: '',
          name: '',
          project_no: '',
          equip_no: '',
          asset_no: ''
        },
        getProject: {
          access_token: localStorage.getItem('access_token'),
          type: 'project_list_get',
          data: {
            project_id: ''
          }
        },
        getStationNumber: {
          access_token: localStorage.getItem('access_token'),
          type: 'station_no_generate'
        },
        addSiteBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'station_add',
          data: {
            pid: '',
            name: '',
            project_no: '',
            equip_no: '',
            asset_no: ''
          }
        }
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        axios.post('/station', this.getStationNumber, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.addData.pid = res.data.pid
        })
          .catch(function(error) {
            console.log(error)
          })
        axios.post('/pm', this.getProject, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.options = res.data.data
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
          })
        if (this.$route.query.name) {
          this.addData.name = this.$route.query.name
        }
        if (this.$route.query.project) {
          this.addData.project_no = this.$route.query.project
        }
      },
      lookEquip(index, rows) {
        this.$router.push({
          path: '/managementSide/mSiteAdmin/lookEquip',
          query: {
            type: 'add',
            cid: rows.cid,
            name: this.addData.name,
            project: this.addData.project_no
          }
        })
      },
      lookInternet(index, rows) {
        this.$router.push({
          path: '/managementSide/mSiteAdmin/lookInternet',
          query: {
            type: 'add',
            cid: rows.asset_no,
            name: this.addData.name,
            project: this.addData.project_no
          }
        })
      },
      equipOnly: function(templateRadio) {
        console.log(templateRadio)
        this.theEquip = templateRadio
        this.noShow = this.theEquip[0].cid
      },
      assetOnly: function(assetRadio) {
        this.theAsset = assetRadio
      },
      // 添加站点信息
      queryData() {
        axios.post('/station', this.submitadddata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
          })
      },
      disassociation() {
        this.$confirm('是否取消关联设备？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.noShow = ''
          this.theEquip = []
          this.theAsset = []
          this.$message({
            type: 'success',
            message: '取消关联成功!'
          })
        }).catch(() => {
        })
      },
      disassociation2() {
        this.$confirm('是否取消关联网关？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.theAsset = []
          this.$message({
            type: 'success',
            message: '取消关联成功!'
          })
        }).catch(() => {
        })
      },
      addsite() {
        if (this.addData.name === '') {
          this.$message.error('站点名称不能为空')
        } else {
          if (this.addData.name.length > 32) {
            this.$message.error('站点名称长度需在32个字符以内')
          }
        }
        if (this.theEquip.length > 0) {
          this.addData.equip_no = this.theEquip[0].cid
        }
        if (this.theAsset.length > 0) {
          this.addData.asset_no = this.theAsset[0].asset_no
        }
        this.addSiteBody.data = this.addData
        axios.post('/station', this.addSiteBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.errcode === '00000') {
            this.$router.push({
              path: '/monitor/system/station'
            })
          }
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
          })
      }
    }
  }
</script>

<style scoped>
  .addBody{
    width: 100%;
    min-height: 550px;
    padding: 0px 20px;
    border: 1px solid #E0E0E0;
    background-color: white;
  }
  /deep/ .textTitle {
    color: #323842;
    font-size: 14px;
    font-weight: bold;
    padding:20px 0px;
    border-bottom: 1px solid #e0e0e0;
  }
  /deep/ .addMessage {
    margin: 20px 0px;
    width: 346px;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .readonlyMessage > input{
    border:none;
  }
  /deep/ .smallMessage {
    width: 256px;
  }
  /deep/ .coordinateMessage {
    width: 520px;
  }
  /deep/ .export {
    background: #fff;
    height: 30px;
    padding: 0px 6px;
    border: 1px solid #0072F3;
    color: #0072F3;
  }
  /deep/ .rightMessage {
    margin-left: 15px;
  }
  /deep/ .el-icon-circle-close-outline:before {
    color: #D05133;
    font-size: 20px;
    font-weight: bold;
  }
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    float: right;
    margin-top: 20px;
    margin-left: 10px;
  }
  /deep/ .indieWidth {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
    margin-top: 20px;
  }
  /deep/ .relation {
    float: right;
    height: 30px;
    font-size: 14px;
    padding: 6px 16px;
    background: #0072F3;
    border-color: #0072F3;
  }
  /deep/ .el-table--border {
    margin-top: 20px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #E3E3E3;
  }
  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F0F2F7;
  }
  /deep/ .Association-gateway {
    float: right;
    margin: 5px 0px 0px 10px;
  }
</style>
